<template>
  <div>
    <div :class="['commodity',good.errorCode == 55101 || good.errorCode == 55102?'border-Top':'']">
      <div class="left" @click="handleShowImg(good.cover)">
        <xhImg :src="good.cover" />
        <div
          class="no-commodity"
          v-if="good.errorCode == 55101 || good.errorCode == 55102"
        >
          {{ good.errorCode == 55101 ? "已下架" : "已售罄" }}
        </div>
      </div>
      <div class="right">
        <div class="commodity-title">
          {{ good.title }}
        </div>
        <div class="spec-list" v-if="good.skuInfo != '[]'">
          {{ JSON.parse(good.skuInfo) }}
        </div>
        <div class="bottom">
          <div class="price">
            <span>¥</span>{{ (good.price / 100).toFixed(2) }}
          </div>
          <div
            v-if="good.errorCode == 55101 || good.errorCode == 55102"
            class="error"
          >
            x{{ good.num }}
          </div>
          <div class="btns" v-else>
            <div class="prev-next">
              <div
                class="btn iconfont icon-jian"
                @click="changeAloneNum()"
              ></div>
              <div class="text">
                {{ good.num }}
              </div>
              <div
                class="btn iconfont icon-jia"
                @click="changeAloneNum(1)"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { saveCartItem } from "@/service/api/sp-store/commodity.js";
export default {
  props: {
    good: {
      require: true,
      default: () => ({}),
    },
  },
  data() {
    return {
      show: false,
      skuActiveArr: [],
      skuInfo: [],
      queryParams: {
        goodsId: "",
        num: 1,
        skuId: "",
        pubShopId: "",
        operation: 1,
      },
      aloneNum: 0,
    };
  },
  mounted() {
    this.initData();
  },
  computed: {
    ...mapState("sp-store/index", ["pubShopId", "cartData"]),
  },
  methods: {
    // sku商品加减购操作
    changeAloneNum(type) {
      let {
        good: { stockNum, num, errorCode },
        queryParams,
      } = this;
      if (type) {
        if (num >= stockNum) return;
        ++num;
      } else {
        --num;
      }
      if (errorCode == 55101 || errorCode == 55102) {
        uni.showToast({
          title: `${errorCode == 55101 ? "该商品已下架" : "该商品已售罄"}`,
          icon: "none",
        });
        return;
      }
      this.queryParams.num = num;
      saveCartItem(queryParams).then((res) => {
        if (res == null) {
          this.$store.dispatch("sp-store/index/initCart");
        } else {
          uni.showToast({ title: res, icon: "none" });
        }
      });
    },
    initData() {
      let {
        pubShopId,
        good: { goodsId, skuId },
      } = this;
      this.queryParams = Object.assign({}, this.queryParams, {
        pubShopId,
        goodsId,
        skuId,
      });
    },
    handleShowImg(value) {
      if (!value) return;
      let imgUrl = process.env.VUE_APP_BASE_FileUrl + value;
      uni.previewImage({
        current: "",
        urls: [imgUrl],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.border-Top{
  padding-top: 30rpx;
  border-top: 1px solid #ececec;
}
.commodity {
  margin-top: 30rpx;
  display: flex;
  .left {
    width: 150rpx;
    height: 150rpx;
    border-radius: 8rpx;
    overflow: hidden;
    position: relative;
    .no-commodity {
      background: #13131350;
      padding: 8rpx;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 26rpx;
      font-weight: 500;
      color: #ffffff;
    }
  }
  .right {
    flex: 1;
    padding: 0rpx 25rpx 10rpx 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .commodity-title {
      font-size: 29rpx;
      font-weight: bold;
      color: #131313;
    }
    .spec-list {
      padding: 5rpx 14rpx;
      color: #888888;
      opacity: 0.8;
      font-size: 27rpx;
      border: 1px solid #b4b4b4;
      opacity: 0.8;
      border-radius: 8rpx;
      width: fit-content;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .price {
        font-size: 36rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #f05357;
        span {
          font-size: 29rpx;
        }
      }
      .error {
        font-size: 27rpx;
        font-weight: 500;
        color: #888888;
      }
      .btns {
        display: flex;
        .select-btn {
          width: 125rpx;
          height: 44rpx;
          background: var(--theme-color);
          border-radius: 22rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #ffffff;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .prev-next {
          display: flex;
          align-items: center;
          .btn {
            width: 44rpx;
            height: 44rpx;
            border: 1px solid var(--theme-color);
            border-radius: 50%;
            background: var(--theme-color);
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
          }
          .icon-jian {
            background-color: #ffffff;
            color: #525252;
          }
          .no-change {
          }
          .text {
            margin: 0 30rpx;
            font-size: 28rpx;
            font-weight: bold;
            color: #131313;
          }
        }
      }
    }
  }
}
</style>